<!--
 * @Author: your name
 * @Date: 2021-08-04 15:37:16
 * @LastEditTime: 2021-08-05 10:50:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\15-组件\组件-1.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
  </head>

  <body>
    <!-- 组件的作用：代码的重复利用 -->
    <!-- 组件的定义 ：局部组件+全局组件-->
    <!-- 一个组件就是一个小型的vue实例，vue实例里面可以写的内容 都可以写在组件里面-->
    <div id="app">
      <b-div>
        <input type="text" value="111" />
        <button>按钮</button>
      </b-div>
      <b-div style="color: green; font-size: 20px"> </b-div>
      <b-p style="color: blueviolet"></b-p>
      <b-p></b-p>
    </div>
    <script>
      // 局部组件的定义：components对象定义
      new Vue({
        el: "#app",
        data() {
          return {};
        },
        // 定义有一个局部组件：componets里面定义的所有组件，只是给当前的Vue实例使用
        components: {
          // 组件里面的number有两种传入方式
          "b-p": {
            template: `
                    <p :style={color:color}>这是一个p组件
                    <button @click="add">增加数据</button>
                    {{ number }}
                </p>
                    `,
            props: {
              color: {
                type: String,
                default: "yellow",
              },
            },
            data() {
              return {
                number: 1,
              };
            },
            created() {
              console.log("b-p 创建完毕....");
            },
            mounted() {
              console.log("b-p 渲染完毕....");
            },
            methods: {
              add() {
                this.number++;
              },
            },
          },
          "b-div": {
            /*
             * 定义一个组件，组件名字叫b-div，命名不能和原生的html元素同名
             */
            // 组件定义的所有内容最后都会渲染到插槽里
            // 给组传参要在组件里面定义props并且要在调用组件时候进行参数的传入
            template: `
                   <div :style="{color:color,fontSize:size}">
                    这是一个b-div组件的渲染结果
                    <slot></slot> 
                    </div>
                   `,
            // 组件的传参和参数用props
            // props中传的参数一般为三个 数据类型type，默认值，以及是否必须值required
            props: {
              color: {
                type: String,
                default: "red",
                required: true,
              },
              size: {
                type: Number,
                default: 16,
              },
            },
          },
        },
      });
    </script>
  </body>
</html>
